<template>
  <a-row>
    <a-col :span="24">
      <a-card title="设备点检管理">
        <a-table :columns="columns" :dataSource="inspectionList" rowKey="deviceId" bordered @row-dblclick="showDetails" />
      </a-card>
    </a-col>

    <a-col :span="24" v-if="selectedDevice">
      <a-card title="点检详情" style="margin-top: 20px">
        <p>设备名称: {{ selectedDevice.deviceName }}</p>
        <p>设备编号: {{ selectedDevice.deviceId }}</p>
        <p>点检周期: {{ selectedDevice.inspectionCycle }}</p>
        <p>点检人: {{ selectedDevice.inspector }}</p>
        <p>本次点检日期: {{ selectedDevice.lastInspectionDate }}</p>
        <p>计划下达状态: {{ selectedDevice.planStatus }}</p>
        <p>点检状态: {{ selectedDevice.inspectionStatus }}</p>
        <a-input v-model="contentDescription" placeholder="内容描述" style="margin-top: 10px" />
        <a-button type="primary" @click="issuePlan" style="margin-top: 10px">下达计划</a-button>
      </a-card>
    </a-col>

    <a-col :span="24" style="margin-top: 20px">
      <a-button type="primary" @click="addInspectionPlan">增加点检计划</a-button>
      <a-button style="margin-left: 10px" @click="deleteInspectionPlan">删除点检计划</a-button>
      <a-button style="margin-left: 10px" @click="modifyInspectionPlan">修改点检计划</a-button>
      <a-button style="margin-left: 10px" @click="exportInspectionReport">导出点检报告</a-button>
    </a-col>
  </a-row>
</template>

<script setup>
  import { ref } from 'vue';

  // 点检数据
  const inspectionList = ref([
    {
      deviceId: '001',
      deviceName: '设备A',
      inspectionCycle: '每月',
      inspector: '张三',
      lastInspectionDate: '2024-09-01',
      planStatus: '已下达',
      inspectionStatus: '完成',
    },
    {
      deviceId: '002',
      deviceName: '设备B',
      inspectionCycle: '每季度',
      inspector: '李四',
      lastInspectionDate: '2024-09-05',
      planStatus: '未下达',
      inspectionStatus: '未完成',
    },
    {
      deviceId: '003',
      deviceName: '设备C',
      inspectionCycle: '每月',
      inspector: '王五',
      lastInspectionDate: '2024-09-10',
      planStatus: '已下达',
      inspectionStatus: '完成',
    },
    {
      deviceId: '004',
      deviceName: '设备D',
      inspectionCycle: '每半年',
      inspector: '赵六',
      lastInspectionDate: '2024-09-15',
      planStatus: '已下达',
      inspectionStatus: '进行中',
    },
    {
      deviceId: '005',
      deviceName: '设备E',
      inspectionCycle: '每月',
      inspector: '陈七',
      lastInspectionDate: '2024-09-20',
      planStatus: '未下达',
      inspectionStatus: '未完成',
    },
    {
      deviceId: '006',
      deviceName: '设备F',
      inspectionCycle: '每年',
      inspector: '孙八',
      lastInspectionDate: '2024-09-25',
      planStatus: '已下达',
      inspectionStatus: '完成',
    },
  ]);

  // 选中的设备
  const selectedDevice = ref(null);
  const contentDescription = ref('');

  // 列配置
  const columns = [
    { title: '设备名称', dataIndex: 'deviceName', key: 'deviceName' },
    { title: '设备编号', dataIndex: 'deviceId', key: 'deviceId' },
    { title: '点检周期', dataIndex: 'inspectionCycle', key: 'inspectionCycle' },
    { title: '点检人', dataIndex: 'inspector', key: 'inspector' },
    { title: '本次点检日期', dataIndex: 'lastInspectionDate', key: 'lastInspectionDate' },
    { title: '计划下达状态', dataIndex: 'planStatus', key: 'planStatus' },
    { title: '点检状态', dataIndex: 'inspectionStatus', key: 'inspectionStatus' },
  ];

  // 展示详细内容
  const showDetails = (record) => {
    selectedDevice.value = record;
  };

  // 下达计划
  const issuePlan = () => {
    console.log('下达计划');
  };

  // 增加点检计划
  const addInspectionPlan = () => {
    console.log('增加点检计划');
  };

  // 删除点检计划
  const deleteInspectionPlan = () => {
    console.log('删除点检计划');
  };

  // 修改点检计划
  const modifyInspectionPlan = () => {
    console.log('修改点检计划');
  };

  // 导出点检报告
  const exportInspectionReport = () => {
    console.log('导出点检报告');
  };
</script>

<style scoped>
  a-button {
    margin-right: 10px;
  }
</style>
